<template>
	<div class="bottom">
		<p class="bottom_txt1" style="font-family: 'PingFang SC Bold';">Summary</p>
		<slot name="amount"></slot>
		<p class="bottom_txt3" style="font-family: 'PingFang SC Medium';">VAT AED1.20</p>
		<p class="bottom_txt4" style="font-family: 'PingFang SC Bold'; font-weight: bold;">Total Payable Amount</p>
		<slot name="amount2"></slot>
		<p class="bottom_txt5" style="font-family: 'PingFang SC Medium';">AED30.00</p>
		<van-button type="success" class="bottom_btn" @click="Pay"><p class="bottom_txt6">Pay</p></van-button>
	</div>
</template>

<script>
	export default {
		methods : {
			Pay:function() {
				console.log(this.$route.name);
				console.log("===Pay===")
			},
		},
	}
</script>

<style scoped>
	.bottom {
		/* position: relative;
		top: 70vh;
		width: 100vw;
		height: 30vh;
		margin: auto auto 100px auto; */
		position: fixed;
		/* bottom: 5rem; */
		/* bottom: var(100vh-); */
		bottom: 5rem;
		width: 100%;
		line-height: var(--footer-height);
		/* background: #42b983; */
		color: #000000;
	}
	
	.text1 {
		position: relative;
		padding: 0 0 0 100px;
	}
	
	.text2 {
		position: relative;
		margin: auto 100px auto auto;
	}
	
	.text3 {
		position: relative;
		margin: auto 100px auto auto;
	}
	
	.text4 {
		position: relative;
		margin: auto 100px auto auto;
	}
	
	.text5 {
		position: relative;
		margin: auto 100px auto auto;
	}
	
	
	.bottom_btn {
		position: fixed;
		bottom: 2rem;
		height: 4rem;
		background-color: #000000;
		margin-left: 1rem;
		margin-right: 1rem;
		border-radius: 20px;
		width: 80vw;
	}
	
	.bottom_txt6 {
		font-size: 2rem;
		font-family: "PingFang SC Medium";
		font-weight: bold;

		color: aliceblue;
		/* align-items: center; */
		text-align: center;
	}
</style>